<template>
	<div class="app-container">
		<!-- 查询 -->
		<tl-list-search class="searchDialog" ref="search" :query-param="queryParam" @search="doQuery" :isDisplayDefaultSearch="false" :isDisplaySearch="false" v-if="isHeaderDisplay">
			<template slot="search">
				<el-form-item label="问题分级" prop="qry_problemgrading">
					<el-select v-model="queryParam.qry_problemgrading" filterable clearable>
						<el-option v-for="item in codeModel.problemgradingList" :key="item.code" :label="item.name" :value="item.code" />
					</el-select>
				</el-form-item>
				<el-form-item label="问题编号" prop="qry_docno">
					<el-input v-model.trim="queryParam.qry_docno" placeholder="问题编号" @keydown.enter.native="doRefresh" clearable></el-input>
				</el-form-item>
				<el-form-item label="单据日期" prop="docdate">
					<div class="date-pick">
						<el-date-picker v-model="docdate" type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="timeChange"> </el-date-picker>
					</div>
					<!-- <el-date-picker v-model="queryParam.qry_begindocdate" v-if="'asd'.at('qwe')" type="date" style="width:150px" value-format="yyyy-MM-dd" placeholder="开始时间" />至
					<el-date-picker v-model="queryParam.qry_enddocdate" type="date" style="width:150px" value-format="yyyy-MM-dd" placeholder="结束时间" /> -->
				</el-form-item>
				<el-form-item label="审批状态" prop="qry_state">
					<el-select v-model="queryParam.qry_state" filterable clearable>
						<el-option v-for="item in codeModel.stateList" :key="item.code" :label="item.name" :value="item.code" />
					</el-select>
				</el-form-item>
				<el-form-item label="申请人" prop="qry_username">
					<tl-ref-user style="width:190px" v-model="queryParam.qry_usercode" :initDisplayData.sync="queryParam.qry_username" dataType="code" :singleSelect="true"></tl-ref-user>
				</el-form-item>
				<el-form-item label="风险排查负责人" prop="qry_riskmancode">
					<tl-ref-user style="width:190px" v-model="queryParam.qry_riskmancode" :initDisplayData.sync="queryParam.qry_riskman" dataType="code" :singleSelect="true"></tl-ref-user>
				</el-form-item>
				<el-form-item label="问题分析负责人" prop="qry_assayercode">
					<tl-ref-user style="width:190px" v-model="queryParam.qry_assayercode" :initDisplayData.sync="queryParam.qry_assayer" dataType="code" :singleSelect="true"></tl-ref-user>
				</el-form-item>
			</template>
			<template slot="search">
				<el-button class="filter-item" :title="this.titleText" type="primary" icon="el-icon-search" @click="doQuery">搜索</el-button>
				<el-button class="filter-item" type="primary" icon="el-icon-refresh-right" :disabled="resetFlag" @click="resetQueryParam">重置</el-button>
				<el-button class="high-search" type="text" @click="openSearchDialog()">高级搜索</el-button>
			</template>
		</tl-list-search>
		<!-- 工具栏 -->
		<tl-list-toolbar ref="toolbar" @add="openAddDialog('editForm')" :isDisplayExport="false" :isDisplayAdd="false" @exportExcel="doExportExcel" @deleteBatch="doDeleteBatch" @refresh="doRefresh" @columnCustomize="doColumnCustomize" @displaySearch="doDisplaySearch" :isDisplayDeleteBatch="false" :disableDeleteBatch="selectedRowKeys.length <= 0">
			<template slot="left-btn">
				<el-button class="filter-item" type="primary" icon="el-icon-download" @click="doExportExcel" :loading="exportLoading">导出</el-button>
				<el-tag type="info">可查询我拥有权限的责任主体部门所关联的问题</el-tag>
			</template>
		</tl-list-toolbar>
		<div>
			<!--表格渲染-->
			<el-table class="tl-table" ref="mainTable" :height="tableHeight" resizable-key="tableHeight" :resizable-refs="tableResizeRefs" v-loading="loading" :data="datas" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" @row-click="doRowClick" row-key="id" border fit :row-class-name="doChangeRowClassName">
				<el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
				<el-table-column prop="dispproblemgrading" label="问题分级" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="docno" label="问题编号" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="productlinename" label="问题归属产品线" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="dutydeptname" label="牵头分析部门" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="dispstate" label="状态" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="docdate" label="单据日期" width="170px" sortable="custom" sort-by="docdate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="productname" label="产品名称" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="warningtitle" label="告警主题" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="disphappennode" label="问题发生环节" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="disppathway" label="信息途径" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="occurred" label="发生地" width="200px" sortable="custom" sort-by="occurred" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="dispfeedbackperson" label="问题反馈人" width="150px" sortable="custom" sort-by="feedbackperson" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="disprepeat" label="是否重复发生" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="dispwhetherqualitypolicy" label="违反质量政策条款" width="140px" sortable="custom" sort-by="repeat" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="dispriskman" label="风险排查负责人" width="120px" align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="dispassayer" label="问题分析负责人" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="dispusername" label="申请人" width="120px" align="center" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="createon" label="创建时间" width="170px" sortable="custom" sort-by="createon" align="center" header-align="center" :formatter="dateTimeFormat" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="dispcancel" label="作废" width="100px" align="center" header-align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.dispcancel === '否'" type="success">否</el-tag>
						<el-tag v-else type="danger">是</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100px" v-slot="scope" fixed="right">
					<el-dropdown trigger="hover">
						<el-button type="text" icon="el-icon-s-operation" style="margin-left:10px">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
						<el-dropdown-menu>
							<el-dropdown-item icon="el-icon-view" @click.native="openViewDialog('editForm', scope.row.id)">查看</el-dropdown-item>
							<el-dropdown-item icon="el-icon-edit" v-if="scope.row.state === 9" v-hasPermission="['qms.problemalertquery.doChange']" @click.native="openChangeDialog(scope.row.id)">变更</el-dropdown-item>
							<!-- <el-dropdown-item icon="el-icon-delete" @click.native="doDelete(scope.row.id)">删除</el-dropdown-item> -->
							<el-dropdown-item icon="el-icon-s-release" v-if="scope.row.dispcancel === '否' ? scope.row.state === 1 || scope.row.state === 9 : false" v-hasPermission="['qms.problemalertquery.doCancel']" @click.native="doCancel(scope.row.id, scope.row.docno)">作废</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-table-column>
			</el-table>
			<!-- 列表分页 -->
			<el-row class="pagebar" ref="pager">
				<el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
			</el-row>
			<tl-search ref="tlSearch" @search="doQuery" @refresh="doRefresh" @reset="resetQueryParam" :codeModel="this.codeModel" :queryParam.sync="queryParam" :docdate.sync="docdate"></tl-search>
			<tl-edit ref="editForm" @refresh="doRefresh"></tl-edit>
			<problem-alert-change-form ref="changeForm"></problem-alert-change-form>
		</div>
	</div>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
/** 子组件 */
import tlSearch from './searchDialog'
import tlEdit from './ProblemAlertEditForm'
import ProblemAlertChangeForm from '@/views/qms/qemProblemAlert/ProblemAlertChangeForm'
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
export default {
	name: 'qemProblemAlert',
	mixins: [mixin_list],
	components: { tlSearch, tlEdit, ProblemAlertChangeForm },
	data() {
		return {
			description: '问题告警表-列表查询',
			urlPrefix: '/qms/qemProblemAlert/',
			url: {
				queryCodeList: '/qms/qemProblemAlert/dataCodeList',
				list: '/qms/qemProblemAlert/list',
				doCancel: '/qms/qemProblemAlert/doCancel'
			},
			pageInfo: {
				currentPage: 1, // 当前页面
				pageSize: 20, // 每页记录数
				pageSizes: [20, 50, 100],
				totalCount: 0 // 总数
			},
			// 排序参数
			sorterInfo: {
				sidx: 'createon',
				sord: 'desc'
			},
			rowDbClickActionType: 'view',
			queryParam: {
				qry_model: 'query'
			},
			titleText: '',
			exportLoading: false,
			docdate: []
		}
	},
	computed: {
		resetFlag() {
			if (Object.keys(this.queryParam).length === 1) {
				return true
			} else {
				let flagVisible = true
				for (let key in this.queryParam) {
					let data = this.queryParam[key]
					if (data === 'query') {
						continue
					}
					if (data !== '' && data !== null && data !== undefined) {
						flagVisible = false
					}
				}
				return flagVisible
			}
		}
	},
	watch: {
		resetFlag(newVal, oldVal) {
			if (newVal) {
				this.titleText = ''
			} else {
				this.titleText = '您已设置搜索条件，点击“高级搜索”可查看当前设置的所有条件。'
			}
		}
	},
	methods: {
		// 禁用表格前面的选择
		doDisableCheckBox(row, index) {
			if (row.state !== 0 && row.state !== 2) {
				return false
			} else {
				return true
			}
		},
		openSearchDialog() {
			this.$refs.tlSearch.visible = true
		},
		resetQueryParam() {
			this.$refs.tlSearch.clearDocdate()
			this.$set(this, 'docdate', [])
			this.queryParam = {
				qry_model: 'query'
			}
		},
		// 问题告警单作废处理操作
		doCancel(id, docno) {
			let confirmMessage = '即将作废问题告警单（编号：' + docno + ')，单据作废后不可恢复，是否确认？'
			this.$tap.confirm(confirmMessage).then(async _ => {
				// 弹窗赋值描述
				let prompres = await this.$prompt('请输入作废原因', '作废原因', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					// 非空校验
					inputPattern: /.*\S.*/,
					inputErrorMessage: '原因不能为空',
					closeOnClickModal: false
				})
				// 请求作废
				getAction(this.url.doCancel, {
					id: id,
					cancelreason: prompres.value
				})
					.then(res => {
						if (res.success) {
							this.$message({
								message: '作废成功！',
								type: 'success'
							})
							// 作废成功后刷新列表
							this.doRefresh()
						} else {
							this.$tap.alert(res.message, 'warning')
						}
					})
					.catch(err => {})
			})
		},
		beforeExportData() {
			this.exportLoading = true
			return true
		},
		afterExportData() {
			this.exportLoading = false
			return true
		},
		// 打开变更页面
		openChangeDialog(id) {
			this.$refs.changeForm.id = id
			this.$refs.changeForm.visible = true
			this.$refs.changeForm.isAdd = false
			this.$refs.changeForm.disableEditSubmit = true
		},
		timeChange(value) {
			if (value == null || value === "") {
				this.$set(this.queryParam, 'qry_begindocdate', '')
				this.$set(this.queryParam, 'qry_enddocdate', '')
			} else {
				this.$set(this.queryParam, 'qry_begindocdate', value[0])
				this.$set(this.queryParam, 'qry_enddocdate', value[1])
			}
		}
	}
}
</script>

<style scoped></style>
